<template>
	<view class="content">
		<view class="goods-detail" v-for="(item, i) in goods" :key="i">
			<delSlideLeft :item="item" :data_transit="{index: index,item: item}" @delItem="delItem">
				<view class="con">
					<view class="select-wrap" @click="change(i, !item.checked, 'checked')">
						<text class="icon iconfont" :class="item.checked ? 'icon-select': 'icon-no-select'"></text>
					</view>
					<view class="con-wrap">
						<image
							lazy-load mode="aspectFill"
							class="img"  :src="item.mainImgUrl"
						></image>
						<view class="info">
							<text>{{ item.productName }}</text>
							<view class="num-wrap">
								<text class="price">{{ item.spuNames }}</text>
								<InputNumber :value="item.count" class="num" @change="(val) => {
									change(i, val, 'count')
								}" />
							</view>
						</view>
					</view>
				</view>
			</delSlideLeft>
		</view>
		<view class="select-bottom">
			<text
				class="icon iconfont" :class="selectAll ? 'icon-select': 'icon-no-select'"
				@click="changeAll(!selectAll)"
			></text>
			<view class="price-wrap">
				<text class="price">合计: {{ data.checkedSumOriginPrice || 0 }}</text>
				<text>已选{{ data.checkedCount || 0 }}件</text>
			</view>
			<view>
				<text>优惠: {{ data.checkedSumAfterDisCountPrice || 0 }}</text>
			</view>
			<button
				type="primary"
				class="sub-btn btn" size="mini"
				@click="submit"
			>
				提交
			</button>
		</view>
	</view>
</template>

<script>
import delSlideLeft from '@/components/SlideOperate/index.vue'
import InputNumber from '@/components/InputNumber/index.vue'

export default {
	components: {
		delSlideLeft,
		InputNumber
	},
	data() {
		return {
			range1: [{"value": '1',"text": "全选"}],
			range: [{"value": '1',"text": ""}],
			selectAll: [],
			goods: [],
			data: {},
		}
	},
	computed: {
		selectGoods() {
			console.log(this.goods[0])
			return this.goods.filter(v => v.checked);
		}
	},
	onShow() {
		this.getList();
	},
	methods: {
		/**
		 * 获取购物车列表
		 */
		getList() {
			this.$http.post('/cart/getCartVoList', {}).then(res => {
				console.log(res , '2132')
				this.goods = (res.data?.cartProductVoList || []).map(v => ({
					...v, select: [],
					checked: String(v.checked) === 'true'
				}));
				if (this.goods.find(v => !v.checked)) {
					this.selectAll = false;
				}
				else {
					this.selectAll = true;
				}
				this.data = res.data;
			}).catch(e => {
				console.log(e)
			})
		},
		//点击删除按钮事件
		delItem: function(e) {
			let that = this;
			that.goods.splice(e.data.index,1);
		},
		change(index, val, type) {
			uni.showLoading({
				mask: true,
			});
			const url = type === 'checked' ? '/cart/changeStatus' : '/cart/setCount';

			const params = type === 'checked' ? {
				// status: String(val)
			} : {
				count: val
			}
			this.$http.post(url, {
				cartId: this.goods[index].cartId,
				...params,
			}).then(res => {
				uni.hideLoading();
				this.goods = this.goods.map((v, i) => {
					return i === index ? {
						...v,
						[type]: val
					} : v
				});
				if (this.goods.find(v => !v.checked)) {
					this.selectAll = false;
				}
				else {
					this.selectAll = true;
				}
				this.data = res.data;
			}).catch(e => {
				uni.hideLoading();
			})
		},
		/**
		 * 全选与非全选
		 */
		changeAll(val) {
			uni.showLoading({
				mask: true,
			});
			setTimeout(() => {
				uni.hideLoading();
			}, 2000);
			this.$http.post('/cart/checkAllOrNot', {
				status: String(val)
			}).then(res => {
				this.goods = this.goods.map((v, i) => {
					return {
						...v,
						checked: val ? true : false
					}
				});
				this.selectAll = val;
				this.data = res.data;
			}).catch(e => {
				console.log(e)
			})
		},
		/**
		 * 提交购物车
		 */
		submit() {
			if (!this.selectGoods.length) {
				return;
			}
			uni.navigateTo({
				url: '/pages/confirm/index'
			});
		}
	}
}
</script>

<style lang="stylus" scoped>
.content
	.icon-no-select
		// color #EE5640
		font-size 48rpx
		color #666
	.icon-select
		color #EE5640
		font-size 48rpx
.goods-detail
	margin 30rpx
	padding 40rpx
	border-radius 8rpx
	background #fff

	.con
		display flex
		align-items center

		.con-wrap
			display flex
			flex 1

		.img
			height 180rpx
			width 180rpx
			margin-right 20rpx

		.info
			display flex
			flex-direction column
			justify-content space-between
			flex 1

		.num-wrap
			display flex
			justify-content space-between
			align-items center

			.num
				margin-left auto

.select-wrap
	display flex
	position relative

	&::after
		position absolute
		left 0
		width 100%
		height 100%
		top 0
		z-index 10
		content ' '

.select-bottom
	position fixed
	bottom 0
	left 0
	width 100%
	height 106rpx
	background #fff
	display flex
	align-items center
	box-sizing border-box
	padding 0 30rpx

	.price-wrap
		display flex
		flex-direction column
		justify-content center
		margin 0 20rpx

		.price
			font-weight 500
			font-size 28rpx

	.sub-btn
		margin-left auto
		margin-right 0
	>>>.checklist-box.is-checked
		.checklist-text
			color #333
</style>
